﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Home</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Starter</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet"
          th:href="@{https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i}"/>
    <link rel="stylesheet"
          th:href="@{https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i}"/>
    <link rel="stylesheet" th:href="@{/mall/css/main.css}"/>
</head>
<body class="animsition">
<div class="shop-detail-1 woocommerce" id="page">
    <div th:replace="@{/include/fore_header}::header"></div>
    <section class="sub-header shop-detail-1">
        <img class="rellax bg-overlay" th:src="@{/mall/images/sub-header/01.jpg}" alt="">
        <div class="overlay-call-to-action"></div>
        <h3 class="heading-style-3">商品详情</h3>
    </section>
    <section class="boxed-sm">
        <div class="container">
            <div class="row product-detail">
                <div class="row main">
                    <div class="col-md-6">
                        <div class="woocommerce-product-gallery">
                            <div class="main-carousel">
                                <div class="item">
                                    <img class="img-responsive" th:src="@{'/upload/img/'+${goods.goodsPicture}}"
                                         alt="product thumbnail">
                                </div>
                            </div>
                            <!--<div class="thumbnail-carousel">-->
                                <!--<div class="item">-->
                                    <!--<img class="img-responsive" th:src="@{/mall/images/product/01.jpg}"-->
                                         <!--alt="product thumbnail">-->
                                <!--</div>-->
                            <!--</div>-->
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="summary">
                            <div class="desc">
                                <div class="header-desc">
                                    <h2 class="product-title" th:text="${goods.goodsName}">Sald</h2>
                                    <p class="price" th:text="'￥'+${goods.goodsPrice}">$2.00</p>
                                </div>
                                <div class="body-desc">
                                    <div class="woocommerce-product-details-short-description">
                                        <p  th:text="${goods.goodsDescription}">Duis vestibulum ante velit. Pellentesque orci felis, pharetra ut pharetra ut,
                                            interdum at mauris. Aenean efficitur aliquet libero sit amet scelerisque.
                                            Suspendisse efficitur mollis eleifend. Aliquam tortor nibh, venenatis quis
                                            sem dapibus, varius egestas lorem a sollicitudin. </p>
                                    </div>
                                </div>
                                <div class="footer-desc">
                                    <div class="cart">
                                        <div class="quantity buttons-added">
                                            <input class="minus" value="-" type="button">
                                            <input class="input-text qty text" step="1" min="1" max="" name="quantity"
                                                   value="1" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric"
                                                   type="number" id="quantity">
                                            <input class="plus" value="+" type="button">
                                        </div>
                                        <button class="btn btn-brand no-radius addToCart">添加到购物车</button>
                                    </div>
                                </div>
                            </div>
                            <div class="product-meta">
                                <p class="sold">已售:
                                    <a href="http://localhost:8848/fore/index" target="_blank" rel="tag" th:text="${goods.goodsSold}">Natural</a>
                                </p>
                                <p class="posted-in">类别:
                                    <a href="@{/fore/#" rel="tag"  th:text="${goods.goodsCategory}">Food</a>
                                </p>
                                <p>编号:
                                    <a  class="id"  th:text="${goods.goodsId}">A203</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>
</div>
<div th:replace="@{/include/fore_footer}::footer"></div>
<div th:replace="@{/include/fore_js}::js"></div>
<script>
    $(function () {
        $(".plus").click(function () {
            var quantity=$(this).parent().find("#quantity");
            if (quantity.val()<99){
                quantity.val(parseInt(quantity.val())+1);
            }
        });
        $(".minus").click(function () {
            var quantity=$(this).parent().find("#quantity");
            if (quantity.val()>1){
                quantity.val(parseInt(quantity.val())-1);
            }
        });
        $(".addToCart").click(function () {
            var amount=$(this).parents(".cart").find("#quantity").val();
            var id=$(this).parents(".summary").find(".id").html();
            var actionAddToCart = $('.js-action-add-cart');
            var productName=$(this).parents(".summary").find(".product-title").html();
            console.info(productName);
            $.ajax({
                type: "POST",
                url: "/goods/addToCart",
                data: {id: id, amount: amount},
                dataType: "json",
                success: function (msg) {
                    if (msg["ok"]) {
                        notifyAddToCart(productName);
                        $(this).addClass('is-added');
                        setTimeout(function () {
                            actionAddToCart.removeClass('is-added');
                        }, 1000);
                    }
                }
            });
        });
    });
    function notifyAddToCart(productName) {
        $.notify({
            title: productName,
            icon: 'lnr lnr-cart',
            message: "is added to card"
        }, {
            type: 'success',
            animate: {
                enter: 'animated fadeInUp',
                exit: 'animated fadeOut'
            },
            placement: {
                from: "bottom",
                align: "right"
            },
            offset: 20,
            spacing: 10,
            z_index: 1031,
        });
    };

</script>
</body>
</html>

